<!-- src/components/CORSRuleDrawer.vue -->
<template>
    <el-drawer :model-value="visible" :title="isEditing ? '编辑规则' : '创建规则'" direction="rtl" size="600px"
        @close="handleClose">
        <el-form :model="form" ref="ruleFormRef" label-position="top">
            <el-form-item label="来源 (Origins)" prop="AllowedOrigins" required>
                <el-input v-model="form.AllowedOrigins[0]" placeholder="例如: http://example.com 或 *"></el-input>
                <div class="form-item-help">
                    指定允许访问的域名。使用 `*` 表示允许任何来源（请谨慎使用）。
                </div>
            </el-form-item>

            <el-form-item label="允许 Methods" prop="AllowedMethods" required>
                <el-select v-model="form.AllowedMethods" multiple placeholder="请选择允许的HTTP方法" style="width: 100%;">
                    <el-option label="GET" value="GET"></el-option>
                    <el-option label="PUT" value="PUT"></el-option>
                    <el-option label="POST" value="POST"></el-option>
                    <el-option label="DELETE" value="DELETE"></el-option>
                    <el-option label="HEAD" value="HEAD"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="允许 Headers" prop="AllowedHeaders">
                <el-input v-model="form.AllowedHeaders[0]" placeholder="例如: authorization 或 * (留空表示不支持)"></el-input>
                <div class="form-item-help">
                    允许跨域请求中携带的自定义Header。
                </div>
            </el-form-item>

            <el-form-item label="暴露 Headers" prop="ExposeHeaders">
                <el-input v-model="form.ExposeHeaders[0]" placeholder="例如: ETag (留空表示不支持)"></el-input>
                <div class="form-item-help">
                    允许前端JS访问的响应头。
                </div>
            </el-form-item>

            <el-form-item label="缓存时间(秒)" prop="MaxAgeSeconds">
                <el-input-number v-model="form.MaxAgeSeconds" :min="0" placeholder="例如: 3600"></el-input-number>
            </el-form-item>
        </el-form>

        <template #footer>
            <div style="flex: auto">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, watch, computed } from 'vue';

const props = defineProps({
    visible: Boolean,
    ruleData: Object, // 传入用于编辑的规则数据
});

const emit = defineEmits(['update:visible', 'submit']);

const form = ref({});
const isEditing = computed(() => !!(props.ruleData && props.ruleData.originalIndex !== undefined));

const createDefaultRule = () => ({
    AllowedOrigins: [''],
    AllowedMethods: ['GET'],
    AllowedHeaders: [''],
    ExposeHeaders: [''],
    MaxAgeSeconds: 3600,
});

// 监听父组件传来的数据，填充表单
watch(() => props.visible, (newVal) => {
    if (newVal) {
        // 创建一个干净的默认规则结构
        let baseForm = createDefaultRule();

        if (isEditing.value) {
            // 如果是编辑模式，用传入的数据覆盖默认值
            // Object.assign 会合并两个对象，如果 props.ruleData 中有某个字段，
            // 就会覆盖 baseForm 中的同名字段。
            // 关键在于：如果 props.ruleData 中没有某个字段（比如 AllowedHeaders），
            // baseForm 中的默认值（['']）就会被保留下来。
            baseForm = Object.assign(baseForm, props.ruleData);
        }

        // 最后将处理好的、结构完整的对象赋值给 form
        form.value = baseForm;
    }
});

const handleClose = () => {
    emit('update:visible', false);
};

const handleSubmit = () => {
    // 过滤掉用户输入的空字符串
    const cleanOrigins = form.value.AllowedOrigins.filter(Boolean);

    if (cleanOrigins.length === 0 || form.value.AllowedMethods.length === 0) {
        ElMessage.error('来源(Origins)和允许Methods不能为空');
        return;
    }

    // 准备提交的数据，只包含有效的值
    const payload = {
        ...form.value,
        AllowedOrigins: cleanOrigins, // 使用清理过的 origins
    };

    emit('submit', payload);
    handleClose();
};
</script>

<style scoped>
.form-item-help {
    font-size: 12px;
    color: #909399;
    line-height: 1.5;
    margin-top: 4px;
}
</style>